@volvo-cars/ui-design-tokens
Advanced tools
_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
Questions? Ask in Slack #design-system-web
Design tokens capture the low-level design properties like colors, grid, spacing and typography. These tokens provide a single source of truth and feed into the different UI components.
Tokens in this repository should be in sync with the design libraries in Figma.
If you are using VCC UI, design tokens will be made available through built-in features in an upcoming release.
If you want to use the tokens directly outside of VCC UI:
Install the design tokens package by running
yarn add @volvo-cars/ui-design-tokens
The following CSS files are available from the package:
@font-face rules for Volvo Broad@font-face rules for Volvo NovumInclude the CSS files in your page, and add the versioned root class name, e.g. <html class="volvo_0_1"> (available as classNames.root).
To switch a section of the page to the dark color scheme, use the scheme-dark (classNames.schemeDark) class name and the scheme-light (classNames.schemeLight) class name to switch back.
Class names and tokens are available as JavaScript exports with TypeScript types for usage with CSS-in-JS or inline styles. The tokens refer to the CSS variables in the static CSS files, and will update dynamically based on the wrapping color scheme class name.
import { classNames, tokens } from '@volvo-cars/ui-design-tokens';
<div
className={classNames.schemeLight}
style={{
background: tokens.colorBackgroundPrimary,
color: tokens.colorPrimary,
paddingBlock: tokens.size,
}}
/>;
Import the CSS in your project with the following imports
import '@volvo-cars/ui-design-tokens/css/tokens.css';
import '@volvo-cars/ui-design-tokens/css/volvo-broad.css';
import '@volvo-cars/ui-design-tokens/css/volvo-novum.css';
Add the appropriate class names
import { classNames } from '@volvo-cars/ui-design-tokens';
export default class MyDocument extends Document {
render() {
return <Html className={classNames.root}></Html>;
}
}
Legacy tokens are still available in 2.x in the following output structure
- build/
- web
- volvo
- tokens.css
- tokens.json
- tokens.scss
- volvo-dark
- android
- volvo
- volvo-dark
- ios
- volvo
- volvo-dark
To build the design tokens locally run yarn build
FAQs
_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
The npm package @volvo-cars/ui-design-tokens receives a total of 1,521 weekly downloads. As such, @volvo-cars/ui-design-tokens popularity was classified as popular.
We found that @volvo-cars/ui-design-tokens demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.
Security News
Node.js v22.12.0 (LTS) debuts with require(esm) enabled by default, alongside security milestones and automated workflows for faster, more stable releases.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.